<style scoped>
.search-system-content-list /deep/ .el-form-item {
  margin-bottom: 8px;
}
</style>
<!--  -->
<template>
  <div class="search-system-content-list">
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="文章标题">
        <el-input v-model="search.title" maxlength="100" placeholder="输入文章标题" size="small"></el-input>
      </el-form-item>
      <el-form-item label="文章分类" v-if="system && system.systemType && system.systemType.id === 1">
        <el-select v-model="search.category" placeholder="选择分类" size="small">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="未定义" :value="0"></el-option>
          <template v-for="item in categories[0]">
            <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
            <template v-for="ite in categories[item.id]">
              <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id"></el-option>
              <template v-for="it in categories[ite.id]">
                <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id"></el-option>
              </template>
            </template>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="短标题级别" v-if="system && system.systemType && system.systemType.id === 2">
        <el-select v-model="search.slug" placeholder="选择级别" size="small">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="顶级" :value="0"></el-option>
          <template v-for="item in sluges[0]">
            <el-option :key="item.id" :label="item.slug" :value="item.id"></el-option>
            <template v-for="ite in sluges[item.id]">
              <el-option style="padding-left:36px;" :key="ite.id" :label="ite.slug" :value="ite.id"></el-option>
            </template>
          </template>
        </el-select>
      </el-form-item>

      <br />
      <el-form-item label="发布时间">
        <el-date-picker v-model="search.releasedAt" type="datetimerange" size="small" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="search.createAt" type="datetimerange" size="small" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item style="margin-left:12px;">
        <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
        <el-button type="success" @click="onReset" size="small">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    search: {
      type: Object
    },
    resetData: {
      type: Function
    },
    reset: {
      type: Function
    }
  },
  created () {
    let query = this.$route.query
    if (!query || !query.sid) {
      this.$message.error('未能获取到正确的数据')
      return
    }
    let systemId = query.sid
    // 获取系统信息
    this.$post('/system/info', { id: systemId }).then((resoponse) => {
      if (resoponse && resoponse.id) {
        this.system = resoponse
        if (this.system.systemType.id === 1) {
          // 获取所有的分类信息
          this.$post('/category/table-data-infos-by-system-id', { systemId: systemId }).then((resoponse) => {
            if (resoponse.categories) {
              this.categories = resoponse.categories
            } else {
              this.categories = []
            }
          })
        } else if (this.system.systemType.id === 2) {
          // 获取所有的文章级别信息
          this.$post('/system/article/slug-infos', { systemId: systemId }).then((resoponse) => {
            if (resoponse) {
              this.sluges = resoponse
            } else {
              this.sluges = []
            }
          })
        }
      }
    })
  },
  data () {
    return {
      // 获取系统的分类信息
      categories: [],
      // 当前的系统
      system: {},
      // 文章级别信息
      sluges: []
    }
  },
  methods: {
    onSubmit () {
      this.resetData({ page: 1 })
    },
    onReset () {
      this.reset()
      this.$nextTick(() => {
        this.onSubmit()
      })
    }
  }
}

</script>
